<template>
    <div class="home-container">
        <!-- 导航栏区域开始 -->
        <TridentCustomNav>
            <template #default>轻聊</template>
        </TridentCustomNav>
        <!-- 导航栏区域结束 -->

        <!-- 内容区域开始 -->
        <div class="content-wrap">
            <!-- 聊天栏开始 -->
            <div class="chat-nav-wrap">
                <div class="chat-nav-box">
                    <!-- 骨架屏区域开始 -->
                    <TridentCellSkeleton v-if="isSkeleton" v-for="(index) in 7" :key="index"/>
                    <!-- 骨架屏区域结束 -->

                    <!-- 私聊+群聊区域开始 -->
                    <van-swipe-cell v-for="(item, index) in commonStore.chatTargetList" :key="index">
                        <div class="nav-item-box" @click="goto(item)">
                            <!-- 私聊好友头像区域开始 -->
                            <div class="avatar" v-if="item.mode == 1">
                                <van-image
                                    width="100"
                                    height="100"
                                    :src="item.target_info.avatar_url ? global.MINIO_FILE_DOMAIN + item.target_info.avatar_url : 'src/assets/images/default_avatar.png'"
                                    fit="contain"
                                />

                                <!-- 标记区域开始 -->
                                <div class="mark" v-if="item.unread_num > 0">{{ item.unread_num }}</div>
                            </div>
                            <!-- 私聊好友头像区域结束 -->

                            <!-- 群聊头像区域开始 -->
                            <div class="avatar group-chat" v-if="item.mode == 2">
                                <div v-for="(avataUrl, index) in item.target_info.avatar_url.split(',')" :key="index">
                                    <van-image
                                        v-if="index < 9"
                                        width="18"
                                        height="18"
                                        :src="avataUrl ? global.MINIO_FILE_DOMAIN + avataUrl : 'src/assets/images/default_avatar.png'"
                                        fit="contain"
                                    />

                                    <!-- 标记区域开始 -->
                                    <div class="mark" v-if="item.unread_num > 0">{{ item.unread_num }}</div>
                                </div>
                            </div>
                            <!-- 群聊头像区域结束 -->

                            <!-- 文本区域开始 -->
                            <div class="nav-item">
                                <div class="left">
                                    <div class="username">{{ item.target_info.name }}</div>
                                    <!-- 文本消息类型 -->
                                    <div class="message ellipsis-1" v-if="item.message.type == 1">
                                        {{ item.mode == 2 ? item.message.from_user?.username + '：' : '' }} {{ item.message.contents }}
                                    </div>
                                    <!-- 图片消息类型 -->
                                    <div class="message ellipsis-1" v-else-if="item.message.type == 2">
                                       {{ item.mode == 2 ? item.message.from_user?.username + '：' : '' }}[图片]
                                    </div>
                                    <!-- 语音消息类型 -->
                                    <div class="message ellipsis-1" v-else-if="item.message.type == 3">
                                        {{ item.mode == 2 ? item.message.from_user?.username + '：' : '' }}[语音]
                                    </div>
                                    <!-- 视频消息类型 -->
                                    <div class="message ellipsis-1" v-else-if="item.message.type == 4">
                                        {{ item.mode == 2 ? item.message.from_user?.username + '：' : '' }}[视频]
                                    </div>
                                    <!-- 位置消息类型 -->
                                    <div class="message ellipsis-1" v-else-if="item.message.type == 5">
                                        {{ item.mode == 2 ? item.message.from_user?.username + '：' : '' }}[位置]
                                    </div>
                                </div>

                                <div class="right">
                                    <div class="time">{{simplifyDateFormat(item.message.create_time)}}</div>
                                    <div>
                                        <!-- 免打扰区域 -->
                                        <i class="iconfont icon-guanbixiaoxi" v-if="item.target_info.is_disturb == 1"></i>
                                        
                                        <!-- 置顶区域 -->
                                        <i class="iconfont icon-zhiding" v-if="item.target_info.is_top == 1"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <template #right>
                            <van-button square text="关闭" type="danger" style="height: 100%;" @click="handleClose(item.id)" />
                        </template>
                    </van-swipe-cell>
                    <!-- 私聊+群聊区域结束 -->

                    <!-- 服务通知区域开始 -->
                    <div class="nav-item-box" @click="$router.push('/notify')">
                        <!-- 服务通知头像区域开始 -->
                        <div class="avatar" style="background-color: #27BA9B">
                            <i class="iconfont icon-tongzhi" style="font-size: 35px;color: #fff"></i>
                        </div>
                        <!-- 服务通知头像区域结束 -->

                        <!-- 服务通知区域开始 -->
                        <div class="nav-item">
                            <div class="left">
                                <div class="username">服务通知</div>
                                <!-- 文本消息类型 -->
                                <div class="message ellipsis-1" v-if="notifyList?.length">
                                    {{ notifyList[0].contents }}
                                </div>
                            </div>

                            <div class="right">
                                <div class="time"></div>
                                <div><i class="iconfont icon-guanbixiaoxi"></i></div>
                            </div>

                            <!-- 标记区域开始 -->
                            <div class="mark" v-if="unreadNotifyTotal > 0">{{ unreadNotifyTotal }}</div>
                        </div>
                        <!-- 服务通知区域结束 -->
                    </div>
                    <!-- 服务通知区域结束 -->
                </div>
            </div>
            <!-- 聊天栏结束 -->
        </div>
    </div>
</template>
  
<script setup lang="ts">
// npm install better-scroll --save
import { reqChatTargetListAPI, reqDeleteChatTargetAPI } from '@/apis/chatTarget'
import { useUserStore } from '@/store/modules/user'
import type { ChatTarget, ChatTargetListParams } from '@/types/chatTarget'
import BScroll from 'better-scroll'
import { showConfirmDialog, showSuccessToast } from 'vant'
import { inject, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { simplifyDateFormat } from '@/utils/tools'
import { reqNotifyListAPI, reqNotifyTotalAPI } from '@/apis/notify'
import { Notify } from '@/types/notify'
import { useCommonStore } from '@/store/modules/common'



// ----------------- 定义全局变量开始 -----------------
// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

// 公共存储
const commonStore = useCommonStore()

// 路由器
const router = useRouter()

// 骨架屏
const isSkeleton = ref<boolean>(false)
// ----------------- 定义全局变量结束 -----------------



// 页面挂载完成
onMounted(async () => {
    // await getChatTargetList()
    // await getNotifyList()
    // await getUnreadNotifyTotal()
    await Promise.all([
        getChatTargetList(),
        getNotifyList(),
        getUnreadNotifyTotal()
    ])
    new BScroll((document.querySelector('.chat-nav-wrap')) as any, {
        scrollY: true,
        probeType: 3,
        click: true,
    })
})



// ----------------- 处理聊天好友开始 -----------------
const params = ref<ChatTargetListParams>({
    uid: userStore.profile.user.uid
})

// 请求聊天对象列表
const getChatTargetList = async () => {
    isSkeleton.value = true
    const result = await reqChatTargetListAPI(params.value)
    // 置顶聊天对象
    let topList: ChatTarget[]  = []

    // 非置顶聊天对象
    let untopList: ChatTarget[] = []
    result.data.chat_targets.forEach((item: ChatTarget) => {
        if (item.target_info.is_top == 1) {
            topList.push(item)
        } else {
            untopList.push(item)
        }
    })

    commonStore.setChatTargetList([...topList, ...untopList])
    isSkeleton.value = false
}
// ----------------- 处理聊天好友结束 -----------------



// --------------- 处理关闭好友聊天开始 ---------------
const handleClose = (id: number) => {
    showConfirmDialog({
        confirmButtonColor: '#27BA9B',
        message:'确定要关闭好友聊天吗?',
    }).then(async () => {
        await reqDeleteChatTargetAPI(id +'')
        const index = commonStore.chatTargetList.findIndex((item: ChatTarget) => item.id == id)
        commonStore.chatTargetList.splice(index, 1)
        showSuccessToast('关闭好友聊天')
    }).catch(() => {
        // on cancel
    })
}
// --------------- 处理关闭好友聊天结束 ---------------



// ----------------- 处理页面跳转开始 -----------------
const goto = (item: ChatTarget) => {
    let url = ''
    if (item.mode == 1) {
        url = '/chat?id=' + item.target_info.friend_id
    } else {
        url = '/chat?gid=' + item.target_info.target_id
    }

    router.push(url + '&mode=' + item.mode)
}
// ----------------- 处理页面跳转结束 -----------------



// ----------------- 处理服务通知开始 -----------------
// 通知列表
const notifyList = ref<Notify[]>()

// 未读通知数量
const unreadNotifyTotal = ref<number>(0)

// 获取通知列表
const getNotifyList = async () => {
    const result = await reqNotifyListAPI({
        uid: userStore.profile.user.uid,
        private_public: 1,
        page: 1,
        page_size: 1
    })
    notifyList.value = result.data.notifies
}

// 获取未读通知数量
const getUnreadNotifyTotal = async () => {
    const result = await reqNotifyTotalAPI({
        uid: userStore.profile.user.uid,
        private_public: 1,
        is_read: '1',
    })

    commonStore.setUnreadNotifyTotal(result.data.total)
}
// ----------------- 处理服务通知结束 -----------------
</script>

<style scoped lang="scss">
page,
.home-container {
    height: 100vh;

    // 内容区域开始
    .content-wrap {
        padding-top: 50px;
        // 聊天栏开始
        .chat-nav-wrap {
            height: calc(100vh - 105px);
            padding: 0 10px;
            overflow: hidden;

            .nav-item-box {
                display: flex;
                align-items: center;
                background-color: #fff;
                padding-left: 5px;
                
                .avatar {
                    border-radius: 10px;
                    width: 65px;
                    height: 65px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    border: 1px solid #EDEDED;
                    position: relative;
                    .mark {
                        background-color: red;
                        position: absolute;
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        border-radius: 8px;
                        top: 2px;
                        right: 0px;
                        color: #fff;
                        text-align: center;
                        font-size: 10px;
                    }
                }
                .group-chat {
                    flex-wrap: wrap;
                }
                .nav-item {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    margin-left: 10px;
                    border-bottom: 1px solid #EDEDED;
                    padding: 20px 10px 20px 0;
                    height: 80px;
                    position: relative;
                    .left {
                        flex: 1;
                        .username {
                            font-size: 18px;
                            color: #000;
                        }
                        .message {
                            font-size: 13px;
                            padding-top: 5px;
                            color: #C0C0C0;
                        }
                    }
                    .right {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        width: 70px;
                        font-size: 12px;
                        color: #C0C0C0;
                        .time {
                            padding-bottom: 10px;
                        }
                        .iconfont {
                            font-size: 20px;
                        }
                    }

                    // 标记区域开始
                    .mark {
                        background-color: red;
                        position: absolute;
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        border-radius: 8px;
                        top: 6px;
                        left: -20px;
                        color: #fff;
                        text-align: center;
                        font-size: 10px;
                    }
                }

                &:last-child .nav-item {
                    border-bottom: none;
                }
            }
        }
    }
}
</style>
  